<template>
  <div>

    <view class="my_repaly">
      <view class="my_repaly_top">
        <!--头像区  -->
        <view class="headerPic">
          <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
        </view>
        <!--语音内容区  -->
        <view class="message">
          <!--昵称时间  -->
          <view class="top">
            <view class="nickname">小仙女</view>
            <view class="time">03-08 17:33</view>
          </view>
          <!--语音内容时长  -->
          <view class="bottom">
            <view class="voice">
              <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
              <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
            </view>

            <view class="voice_count">123</view>
          </view>
          <!--评论收听区  -->



        </view>
      </view>

    </view>
  </div>
</template>

<script>
export default {
  props: ['text']
}
</script>

<style>
 .my_repaly {
    width: 100%;
    height: 146rpx;
    border-bottom: 1rpx solid #fff;
    margin-top: 16rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    box-sizing: border-box;
  }

  /* 分割线上层*/
  .my_repaly_top {
    width: 100%;
    height: 146rpx;
    border-bottom: 1rpx solid #eee;
  }

  .my_repaly_top .headerPic {
    float: right;
  }

  /*具体内容  */

  .my_repaly_top .message {
    width: 570rpx;
    float: right;
  }

  .my_repaly_top .nickname {
    padding: 20rpx 0 8rpx 40rpx;
    float: right;
  }

  .my_repaly .time {
    padding: 24rpx 0 10rpx 0;
    float: right;
  }

  /*语音内容 时长  */

  .my_repaly .message .bottom {
    float: right;
  }

  .my_repaly .voice {
    float: right;
    padding: 10rpx 0 10rpx 10rpx;
    box-sizing: border-box;
    margin-left: 20rpx;
    margin-right: 0;
  }

  /*声波的图片  */
  .icon_sound {
    margin-right: 8rpx;
  }
  .my_repaly .icon_sound {
    transform: rotate(180deg);
  }
  /*时长  */
  .my_repaly .voice_count {
    float: right;
  }

  /*头像的图片设置  */
  .my_repaly .icon_img {
    margin-left: 20rpx;
  }

  .icon_img {
    width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 1rpx solid #eee;
  }


  /*头像  */

  .headerPic {
    width: 94rpx;
    height: 142rpx;
    float: left;
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    box-sizing: border-box;
  }

  .message {
    width: 626rpx;
    float: left;
  }

  .message .top {
    width: 100%;
    height: 68rpx;
  }

  /*名字  */

  .nickname {
    padding: 20rpx 40rpx 8rpx 0;
    box-sizing: border-box;
    font-size: 28rpx;
    float: left;
    color: #666;
  }

  /*时间  */

  .time {
    padding: 24rpx 0 10rpx 0;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #999;
    float: left;
  }

  .message .bottom {
    width: 100%;
    height: 80rpx;
  }

  .voice {
    background: #fff;
    border: 1rpx solid #999;
    border-radius: 4rpx;
    height: 60rpx;
    float: left;
    padding: 10rpx;
    box-sizing: border-box;
    margin-right: 20rpx;
    clear: both;
  }

  /*声音图片样式  */

  .icon_sound{
    width: 40rpx;
    height: 40rpx;
  }

  .icon_sound {
    margin-right: 8rpx;
  }

  /*时长样式  */

  .voice_count {
    height: 78rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 60rpx;
    float: left;

  }







</style>
